* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #eee;
}

.typing.animate {
    width: 21ch;
    border-right: 0.1em solid black;
    font-family: monospace;
    font-size: 2em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    animation: 
        type 2.5s steps(20),
        writer 1s infinite alternate,
        type2 1s steps(4) 3s forwards,
        type3 3s steps(22, end) 6s forwards,
        delete .5s steps(5) 2.5s;
}

.typing.animate::before {
    content: "Hello, I'm Anzai";
    animation: 
        type2 1s steps(4) 3s forwards,
        type3 3s steps(22, end) 6s forwards;
}

@keyframes type {
    from {
        width: 0;
    }
    to {
        width: 17ch;
    }
}

@keyframes type2 {
    from {
        width: 14ch;
        content: "Hello, I'm Anzia. "
    }
    to {
        width: 17ch;
        content: "Hello, I'm Anzia. "
    }
}

@keyframes type3 {
    from {
        width: 18ch;
        content: "Hello, I'm Anzia. Welcome to my Website!"
    }
    to {
        width: 40ch;
        content: "Hello, I'm Anzia. Welcome to my Website!"
    }
}

@keyframes writer {
    50% {
        border-color: transparent;
    }
}

@keyframes delete {
    from {
        width: 17ch;
    }
    to {
        width: 14ch;
    }
}